<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
		<style type="text/css">
			select{
				width: 100px;
				height: 30px;
			}
			li{
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div id="add">
			新增
		</div>
		<ul>
			<li>
				<select name="" class="old_sel">
					<option value=""></option>
				</select>
				<button>删除</button>
			</li>
			<li>
				<select name="" class="old_sel">
					<option value=""></option>
				</select>
				<button>删除</button>
			</li>
			<li>
				<select name="" class="old_sel">
					<option value=""></option>
				</select>
				<button>删除</button>
			</li>
			<li>
				<select name="" class="old_sel">
					<option value=""></option>
				</select>
				<button>删除</button>
			</li>
			<li>
				<select name="" class="old_sel">
					<option value=""></option>
				</select>
				<button>删除</button>
			</li>
		</ul>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		Array.prototype.arr_remove = function(val) { 
var index = this.indexOf(val); 
if (index > -1) { 
this.splice(index, 1); 
} 
};
		var arr_json = [{"id":10,"name":"热门游戏"},{"id":11,"name":"棋牌游戏"},{"id":12,"name":"捕鱼游戏"},{"id":13,"name":"电子游戏"},{"id":14,"name":"真人视讯"}];
		for(var j=0;j<arr_json.length;j++){
			var str = "";
			var last_data = "";
			for(var i=0;i<arr_json.length;i++){
				if(i==j){
					str += "<option value="+arr_json[i]["id"]+" class='option"+arr_json[i]["id"]+"' >"+arr_json[i]["name"]+"</option>";
					last_data = arr_json[i]["id"];
				}else{
					str += "<option value="+arr_json[i]["id"]+" class='option"+arr_json[i]["id"]+"' disabled='disabled'>"+arr_json[i]["name"]+"</option>";
				}

			}
			$(".old_sel").eq(j).empty().append(str).attr("last",last_data);
		}
		var can_sel = [];
		$("button").click(function(){
			var this_li = $(this).parent();
			this_li.remove();
			var this_sel = this_li.find("select");
			can_sel.push(this_sel.val());
			init();
			console.log(can_sel)
		});
		
		$("select").change(function(){
			var now_value = $(this).val();
			can_sel.arr_remove(now_value);
			var old_value = $(this).attr("last");
			can_sel.push(old_value);
			$(this).attr("last",now_value);
			init();
		})
		
		function init(){
			$("option").prop("disabled",true);
			for(var i=0;i<can_sel.length;i++){
				console.log(can_sel[i]);
				$(".option"+can_sel[i]).prop("disabled",false);
			}
			for (var i=0;i<$("select").length;i++) {
				var value = $("select").eq(i).attr("last");
				if(value){
					console.log(value);
					$("select").eq(i).val(value).find(".option"+value).prop("disabled",false);
				}else{
					$("select").eq(i).val(can_sel[0]);
				}
				
			}
		}
		$("#add").click(function(){
			if(can_sel.length==0){
				alert("没有可添加的项");
				return false;
			}
			var clone_li = $("ul li").eq(0).clone();
			clone_li.find("select").attr("last",can_sel[0]);
			$("ul").append(clone_li);
			can_sel.shift();
			init();
		})
	</script>
</html>